/**********
*页面样式
 **********/

/* =========
基本默认值
 ========== */
html {
    /*有什么作用呢？*/
    /*使用em百分比布局好处是用户可以根据窗口缩放来使字体大小进行改变，而使用了px就是固定的了*/
    font-size: 62.5%;
    color: #222;
}

/*设置文字被选中时的颜色*/
::selection {
    background-color: #b3d4fc;
    text-shadow: none;
}

/*设置无序列表的样式*/
li {
    /*把无序列表前面的小圆点去掉*/
    list-style: none;
}

/*清除浏览器默认样式，不然的话ul会自带一个margin*/
/*但是这个没有在normalize.css里面写着...*/
ul, li {
    margin: 0;
    padding: 0;
}

/* =========
工具样式
 ========== */
/*直接在父元素中居中显示*/
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

/*直接隐藏对应元素，并挤占对应空间*/
.hide {
    display: none !important;
}

.show {
    display: block !important;
}

/*隐藏元素，但是空间会空出来*/
.invisible {
    visibility: hidden;
}

/*隐藏文本*/
.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

/*清除浮动*/
/*匿名表格单元触发bfc，:before防止浏览器margin重叠*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* =========
浏览器版本过低时，有更新提示在页面顶部
 ========== */
.browserupgrade {
    margin: 0;
    padding: 1rem;
    background: #ccc;
}

/**********
 自定义页面样式
 **********/
body {
    /*12px*/
    font-size: 1.2rem;
    /*行距1.5-1.8*/
    line-height: 1.5;
    /*背景色*/
    background-color: #f7f7f7;
}

a {
    color: #666;
    /*超链接默认没有下划线*/
    text-decoration: none;
}

/*鼠标悬浮，点击之后超链接变成的样式*/
a:hover, a:active {
    color: #0ae;
    /*超链接加上下划线*/
    text-decoration: underline;
}

/*网站头部*/
header {
    width: 100%;
}

/*为两个导航设置样式*/
header .top {
    /*行高*/
    /*这里3rem不等于30px，因为在中文版chrome浏览器中，em换算时是1em=12px，最小就是12px，不是10px*/
    line-height: 3rem;
    padding: 0 1.5rem;
    color: #fff;
    background: #555;
    border-bottom: 1px #ecc000 solid;
}

header .top .tel {
    float: left;
}

header .top ul {
    text-align: right;
}

header .top ul li {
    display: inline-block;
}

/*带边框线的连接，用的这个li+li选择器，选择的是第一个元素之后紧跟着的兄弟元素都设置这个效果*/
header .top ul li + li {
    border-left: 1px solid #999;
    /*每一个li元素中间都有一点点间隙，本质是html页面存在的空白字符，可以把所有的换行符都删除掉*/
    /*可以用li不闭合之类的方法，设置负边距也行，都是有利有弊*/
    /*这个边距不一定是3px，每个浏览器都有大有小，不一定兼容，没有啥完美的解决方式...*/
    /*css4中有一个属性white-space-collapsing可以解决这个设置，但是大部分浏览器都不支持*/
    margin-left: -3px;
}

header .top ul li a {
    /*a元素是内联元素，不设置inline-block会使padding什么的不起效果*/
    display: inline-block;
    padding: 0 1.5em;
    color: #fff;
}

/*想当年逆风尿三丈，如今顺风尿湿鞋*/
/*媒体查询的代码和样式的写在一起，这样方便调试*/
/*先确定断点800px和480px，根据产品和设计稿来确定的，每个项目不一定*/
/*这里所说的都是屏幕的宽度，就是设备的宽度，也就是页面实际的宽度，那么是选择px还是选择rem来当宽度呢？*/
/*网站针对特定的分辨率，功能有所不同，设置成绝对的像素值，也就是px*/
/*如果网站只是展示样式有所不同，但是功能都一样的话，媒体查询使用相对的长度单位的话，用户体验更好*/

/*宽度在800px以下或者包含800像素*/
/*转换为相对长度单位时，要按照1rem=16px来换算*/
/*可以理解为，因为媒体查询的优先级非常的高，我们在html设置的字体大小并不能对它起作用*/
/*因为它是根据浏览器来做的换算，所以就要根据1em=16px来换算*/
/*既然不是相对于html的，就没必要用rem了，用em就好了，用rem还可能会有一点bug*/
@media only screen and (max-width: 50em) {
    header .top ul li a {
        /*缩小这几个链接的间距*/
        padding: 0 1em;
    }
}

/*屏幕宽度在481像素和800像素之间*/
@media only screen and (min-width: 30.0625em) and (max-width: 50em) {
    /*header .top ul li a{*/
    /*color: red;*/
    /*}*/
}

/*屏幕在小于等于480像素的宽度范围内*/
/*注意如果屏幕小于480像素，第一段小于800像素的样式也会被继承，应用到页面上*/
@media only screen and (max-width: 30em) {
    header .top .tel,
    header .top ul li:nth-child(3),
    header .top ul li:nth-child(4) {
        /*隐藏掉了理财热线和中间的两个链接*/
        display: none;
    }
}

/*设置主导航样式*/
/*这里会出现一个小bug，因为这里上面的.main中的logo使用了浮动，下面的交易信息也使用了浮动，这两块浮动发生了干扰，所以会把下面的交易信息往前面顶*/
/*有两个解决方法，一个是清除.main导航栏的浮动，一个就是将标题logo的padding-bottom设为0*/
header .main {
    padding: 0;
    /*overflow: hidden;*/
}

header .main .brand {
    float: left;
    /*padding: 1rem 1.5rem;*/
    padding: 1rem 1.5rem 0;
}

header .main ul {
    text-align: right;
}

header .main ul li {
    display: inline-block;
    border-left: 1px solid #f0ede9;
}

header .main ul li a {
    display: inline-block;
    padding: 0 2.5rem;
    line-height: 5.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: #7c7a65;
    text-decoration: none;
}

header .main ul li a:hover,
header .main ul li a:active,
header .main ul li a:active {
    color: #ffb300;
    background-color: #f8f6f1;
}

@media only screen and (max-width: 50em) {
    /*让商标独占一行，然后居中*/
    /*变成block就可以把右边的导航栏给挤到下面去*/
    header .main .brand {
        float: none;
        display: block;
        padding: 0;
        margin: 1.5rem auto 0.5rem;
        text-align: center;
    }

    /*居中显示菜单*/
    header .main ul {
        text-align: center;
    }

    /*取消掉左边的当分隔线的边框*/
    header .main ul li {
        border: none;
    }

    /*间隔变小，别的不变*/
    header .main ul li a {
        padding: 0 1.5rem;
    }
}

@media only screen and (max-width: 30em) {
    header .main ul li {
        line-height: 2.5rem;
    }

    /*隐藏掉第一个首页链接*/
    header .main ul li:first-child {
        display: none;
    }

    /*字号变正常，间隔变小*/
    header .main ul li a {
        font-weight: normal;
        padding: 0 0.5rem;
    }
}

/*网站主要内容*/
.container {
    width: 100%;
}

/*交易信息*/
.transaction {
    width: 100%;
    background-color: #7c7365;
}

/*内容的宽度只占90%*/
.trans-content {
    max-width: 90%;
    margin: 0 auto;
    font-size: 1.5rem;
    /*也可以这样清除浮动*/
    /*overflow: hidden;*/
}

/*这里用了float，记得给父元素添加clearfix类清除浮动*/
.trans-data {
    float: left;
    padding: 1rem;
    text-align: left;
}

.trans-content span {
    display: inline-block;
    line-height: 3rem;
    color: #fff;
    /*float: left;*/
}

.trans-content span.trans-money {
    font-size: 2.2rem;
    color: #ff9900;
    /*规定字符间距*/
    letter-spacing: 3px;
    margin: 0 1rem;
    padding: 0 1rem;
    border-radius: 3px;
    /*背景颜色设置透明*/
    background-color: rgba(255, 255, 255, 0.9);
    /*设置成inset代表内阴影，内嵌效果*/
    box-shadow: 1px 2px 1px #333 inset;
}

.trans-report {
    text-align: right;
}

.trans-report a {
    display: inline-block;
    padding: 1rem;
    line-height: 3rem;
    color: #fff;
}

@media only screen and (max-width: 50em) {
    /*缩小左右间距*/
    .trans-data {
        padding: 1rem 0.5rem;
    }

    /*缩小字体*/
    .trans-data span {
        font-size: 1.2rem;
    }

    /*取消掉金额的样式*/
    .trans-data span.trans-money {
        font-size: 1.6rem;
        margin: 0;
        padding: 0;
        letter-spacing: inherit;
        box-shadow: none;
        background: transparent;
    }

    .trans-report a {
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 30em) {
    /*缩到最小的时候，最外面增加一点上下边距*/
    /*中间的行距和上下就会显得比较自然*/
    .transaction {
        padding: 0.5rem 0;
    }

    /*div都清除浮动，全部居中*/
    .trans-data,
    .trans-report {
        float: none;
        text-align: center;
    }

    /*里面的间距缩小，该多大多大*/
    .trans-data,
    .trans-report a {
        padding: 0;
    }
}

/*滚动广告*/
.ad {
    /*display: none;*/
}

/*平台特点样式*/
.feature {
    width: 90%;
    margin: 2rem auto;
    /*font-size 属性可设置字体的尺寸*/
    /*清除空白字符换行符的影响*/
    font-size: 0;
}

.feature .item {
    display: inline-block;
    /*用于动态计算长度值*/
    /*css3计算方法，33.333333333%的宽度再减去两个padding再减去1个rem的margin */
    width: calc(33.33333% - 2rem - 1rem);
    padding: 1rem;
    font-size: 1.4rem;
    background-color: #fff;
    /*设置一个阴影，这种阴影很好看，注意学习*/
    box-shadow: 0 0 4px #ccc;
}

/*底下这种也通用*/
/*.feature .item {*/
/*!*为元素设定的宽度和高度决定了元素的边框盒。*/
/*就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*!*/
/*box-sizing: border-box;*/
/*display: inline-block;*/
/*width:calc(33.33333333333% - 1rem);*/
/*padding: 1rem;*/
/*font-size: 1.4rem;*/
/*background-color: #fff;*/
/*box-shadow: 0 0 4px #ccc;*/
/*}*/
/*注意这个选择器.item + .item，通过这个选择器为后面两个item设置一个左边的边距*/
.feature .item + .item {
    /*两个空隙一共是3rem，三个就是每个1个rem */
    margin-left: 1.5rem;
}

.feature .item h3 {
    display: inline-block;
    width: 40%;
    margin: 0;
    padding: 0;
    /*vertical-align 属性设置元素的垂直对齐方式。*/
    /*把元素的顶端与行中最高元素的顶端对齐*/
    vertical-align: top;
    font-size: 3.3rem;
    text-align: center;
    color: #ff9900;
}

.feature .item p {
    display: inline-block;
    width: 55%;
    margin: 0;
    padding: 0;
    color: #999;
}

@media only screen and (min-width: 30.0625em) and (max-width: 50rem) {
    /*让标题独占一行，把p标签里面的信息挤下去*/
    /*上下分列，改变字体大小，文字居中*/
    .feature .item h3,
    .feature .item p {
        display: block;
        width: 100%;
        font-size: 2.6rem;
        text-align: center;
    }

    .feature .item p {
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 30rem) {
    /*每一个占一行*/
    /*左右边距释放开*/
    .feature {
        width: 96%;
        margin: 1rem auto;
    }

    .feature .item {
        display: block;
        width: auto;
    }

    /*上下加一点间距。左右不要了*/
    .feature .item + .item {
        margin: 1rem 0 0;
    }
}

/*最新公告样式*/
.notice {
    width: 90%;
    margin: 2rem auto;
    font-size: 1.4rem;
    line-height: 3rem;
    background-color: #fff;
    box-shadow: 0 0 4px #ccc;
}

.notice a {
    /*这就要清除浮动了，不然.notice会没有高度*/
    float: left;
    display: inline-block;
    width: 78%;
    margin-left: 2rem;
    text-decoration: none;
}

/*其实页面里面没有 最新公告 这四个字，要通过css来添加*/
.notice a:first-child {
    /*让文字不换行，截断后的文字显示省略号*/
    /*一般三个属性一起写*/
    /*显示省略符号来代表被修剪的文本*/
    text-overflow: ellipsis;
    /*overflow 属性规定当内容溢出元素框时发生的事情,内容会被修剪，并且其余内容是不可见的*/
    overflow: hidden;
    /*文字不换行*/
    white-space: nowrap;
}

.notice a:first-child:before {
    /*\00a0 代表不换行的空格字符*/
    /*在content里面增加空格没办法使用&nbsp这种空格符号，需要使用空格字符*/
    content: '最新公告: \00a0\00a0';
    color: #aaa;
}

.notice a span {
    color: #999;
    font-size: 1.2rem;
    margin-right: 1rem;
}

.notice a.more {
    float: right;
    /*一般要为浮动的元素设置一个宽度*/
    /*    浮动元素会生成一个块级框，而不论它本身是何种元素。
        如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
        假如在一行之上只有极少的空间可供浮动元素，
        那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。*/
    width: auto;
    margin-right: 2rem;
    color: #ff9900;
}

@media only screen and (max-width: 30em) {
    .notice {
        width: 96%;
        margin: 1rem auto;
        font-size: 1.2rem;
    }

    .notice a {
        margin-left: 1rem;
    }

    /*把日期显示隐藏掉*/
    .notice a span {
        display: none;
    }
}

/*产品列表*/
.product {
    width: 90%;
    margin: 2rem auto;
    font-size: 1.4rem;
    background-color: #f5f9fa;
    border-top: 2px solid #ff9900;
    box-shadow: 0 0 4px #ccc;
}

/*典型的左右百分比布局*/
/*这是左边的占20%*/
.product h2 {
    float: left;
    width: 20%;
    margin-top: 3rem;
    text-align: center;
    font-size: 2.4rem;
    font-weight: normal;
    color: #635c51;
}

.product h2 em {
    display: block;
    margin-top: 1rem;
    font-size: 1.6rem;
}

/*第一个要着重的内容 离上面的h2 高一点*/
/*这样就不用专门给第一个em设置一个类了*/
.product h2 em:first-child {
    margin-top: 4rem;
}

/*典型的左右百分比布局，这是右边内容的占了79.5%*/
.product .product-content {
    float: right;
    width: 79.5%;
    border-left: 1px solid #eee;
    background-color: #fff;
}

/*产品内容又是由一行一行的div来组成*/
.product .product-content .item {
    width: 100%;
}

/*除了第一个item之外，其他的item都往上面加一条分割线当间隔*/
/*这个套路在弄导航栏的时候也用过，不过是加在左边*/
.product .product-content .item + .item {
    border-top: 1px solid #eee;
}

/*每行item里面分为三段，每段按照百分比布局，这是第一段，显示月份，占了30%*/
.product .product-content .item h3 {
    float: left;
    width: 30%;
    margin: 1.5rem 0;
    font-size: 1.4rem;
    font-weight: normal;
    text-align: center;
}

.product .product-content .item h3 em {
    margin-right: 0.5rem;
    font-size: 3.5rem;
    font-style: normal;
    color: #8b999d;
}

/*调成block让这个i标签换行，很灵活*/
.product .product-content .item h3 i {
    display: block;
    font-size: 1.2rem;
    font-style: normal;
    color: #999;
}

/*每个item里面分为三段，每段按照百分比布局，这是第二段，显示 年化收益 和 成交金额，占了48%*/
.product .product-content .item .info {
    float: left;
    width: 48%;
    padding: 1rem;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: 14px;
}

/*第二段里面又分两段，第一段显示年化收益*/
.product .product-content .item .info p {
    float: left;
    display: inline-block;
    text-align: center;
    width: 56%;
}

/*第二段里面又分两段，第二段显示成交金额*/
.product .product-content .item .info p:last-child {
    width: 40%;
}

/*调成block让这个span标签换行，很灵活*/
.product .product-content .item .info p span {
    display: block;
    font-size: 2.4rem;
    color: #ff9900;
}

.product .product-content .item .info p span i {
    font-size: 1.2rem;
    font-style: normal;
    color: #999;
}

/*最后面的购买按钮样式*/
/*每个item里面分为三段，每段按照百分比布局，这是第三段，显示购买按钮，前面两段占了78%，最后的第三段剩下22%*/
/*但是直接分配22%肯定不准确，因为没有计算上margin和padding的影响*/
/*内容部分分了三段，第一段没有margin和padding，第二段有左右各为1rem的padding，第三段，就是自己，有左右各为1的rem*/
/*但是浏览器里面，设定的时候，1rem=12px，所以实际上第二段的padding应该是1.2+1.2=2.4rem*/
/*至于为什么算第三段自己的padding时不是按照1rem=12px这样来换算就不知道了.....2.4+1+1=4.4rem*/
/*.product .product-content .item .buy {*/
/*float: left;*/
/*width: calc(22% - 4.4rem);*/
/*padding: 1rem;*/
/*}*/
/*使用box-sizing: border-box这个属性时，百分比指的是整个盒子的宽度*/
/*元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
/*所以只用减去第二段内容给的左右两个padding就好了，减去1.2+1.2rem，至于为什么是1.2rem，上面解释过了*/
.product .product-content .item .buy {
    box-sizing: border-box;
    float: left;
    width: calc(22% - 2.4rem);
    padding: 1rem;
}

.product .product-content .item .buy a {
    display: block;
    width: 90%;
    margin: 1.5rem auto;
    max-width: 12rem;
    line-height: 4rem;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #ff9900;
    border-radius: 5px;
}

.product .product-content .item .buy a:hover,
.product .product-content .item .buy a:active {
    background-color: #ffc468;
}

.product .product-content .item .buy a.disabled {
    background-color: #ccc !important;
    /*设置光标的样式*/
    cursor: not-allowed;
}

@media only screen and (max-width: 50rem) {
    /*一取消浮动就会让h2布满整行了*/
    .product h2 {
        float: none;
        width: 100%;
        margin-top: 2rem;
        font-size: 2.2rem;
    }

    .product h2 em:first-child {
        margin-top: 0;
    }

    /*原来列显示的强调字变成一行显示*/
    .product h2 em {
        display: inline;
        font-size: 1.2rem;
    }

    /*中等屏幕之下不分左右了，就把原来右边的内容占满整行*/
    .product .product-content {
        float: none;
        width: 100%;
    }

    .product .product-content .item h3 {
        margin-bottom: 0;
    }

    .product .product-content .item h3 em {
        font-size: 2.4rem;
    }

    .product .product-content .item .info {
        padding: 1rem 1rem 0;
        font-size: 1.2rem;
    }

    .product .product-content .item .info p span {
        font-size: 2rem;
    }

    .product .product-content .item .buy a {
        margin: 0.5rem auto;
    }
}

@media only screen and (max-width: 30rem) {
    .product {
        width: 96%;
    }

    /*清除浮动让强调的标签换行*/
    .product h2 em:first-child:before {
        content: " ";
        display: table;
    }

    .product .product-content .item h3 em {
        font-size: 2rem;
        margin-right: 0;
    }

    /*调整比例，没有了购买按钮占的地方*/
    .product .product-content .item .info {
        float: left;
        width: 70%;
        padding: 1rem 0;
        border: none;
    }

    .product .product-content .item .info p span {
        font-size: 1.8rem;
    }

    .product .product-content .item .buy {
        clear: both;
        float: none;
        width: 100%;
        padding: 1rem 0 2rem;
    }

    /*设置了最大宽度，不会太大*/
    .product .product-content .item .buy a {
        margin-top: 0;
        max-width: 26rem;
    }
}

/*底部导航*/
.footer {
    padding: 3rem 0;
    background-color: #fff;
    border-top: 2px solid #eee;
}

.footer-content {
    width: 90%;
    margin: 0 auto;
}

/*这是用来放logo的*/
.footer-content .brand {
    float: left;
    display: block;
    /*filter是一个灰色的滤镜，保证兼容性*/
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    width: 20%;
    height: 35px;
    background: url('../img/logo@1x.png') no-repeat left;
    background-size: 150px 35px;
}

.footer-content ul {
    float: left;
    width: 15%;
}

.footer ul li {
    font-size: 1.4rem;
    line-height: 2.4rem;
}

.footer-content ul li .title {
    font-size: 1.6rem;
    line-height: 3rem;
}

@media only screen and (max-width: 50em) {
    /*把左边的logo隐藏掉*/
    .footer-content .brand {
        display: none;
    }

    /*原来ul只占15%的宽度，现在20%，占满一行*/
    .footer-content ul {
        width: 20%;
    }

    .footer-content ul li {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .footer-content ul li .title {
        font-size: 1.4rem;
        line-height: 2.5rem;
    }
}

@media only screen and (max-width: 30em) {
    .footer-content {
        width: 98%;
    }

    .footer-content ul li .title {
        font-size: 1.2rem;
        line-height: 2rem;
    }
}

/*底部栏*/
footer {
    width: 100%;
    padding: 3rem 0 5rem;
    background-color: #ededed;
}

footer ul {
    text-align: center;
}

footer ul li {
    display: inline-block;
}

footer ul li .icon {
    display: inline-block;
    /*通过文字缩进来把文字都隐藏掉*/
    text-indent: -999rem;
    margin-right: 1.5rem;
    /*CSS雪碧图 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，
    该方法是将小图标和背景图像合并到一张图片上，
    然后利用css的背景定位来显示需要显示的图片部分。*/
    background: url(https://i.alipayobjects.com/e/201307/jebmKcbrh.png) no-repeat;
    background-size: 466px 447px;
    /*设置的背景比实际的背景小，超出去的就用overflow:hidden*/
    overflow: hidden;
}

footer ul li .icon-zfywxk {
    width: 38px;
    height: 27px;
    /*background-position 属性位置设定是指 图片 与 坐标原点的偏移量*/
    /*1.原点位置，即外层块元素的左上角*/
    /*2.background-position 位置设定是指图片与坐标原点的偏移量*/
    /*3.原点是不会动的，移动的是图片
    /* X坐标为正则图片左上角向右平移，为负则图片左上角向左平移 */
    /*4.Y坐标为正则图片左上角向下平移，为负则左上角向上平移*/
    background-position: -369px -45px;
}

footer ul li .icon-pcirk {
    width: 78px;
    height: 27px;
    background-position: -110px -96px;
}

footer ul li .icon-visayz {
    width: 36px;
    height: 27px;
    background-position: -426px -90px;
}

footer ul li .icon-vsjmfw {
    width: 63px;
    height: 27px;
    background-position: -426px -90px;
}

footer ul li .icon-vsjmfw {
    width: 63px;
    height: 27px;
    margin-right: 13px;
    background-position: -401px -186px;
}

footer ul li .icon-wlgs {
    width: 22px;
    height: 27px;
    background-position: -48px -48px;
}

footer ul li .icon-rzcx {
    width: 75px;
    height: 27px;
    background-position: 0 -320px;
}

footer ul li .icon-gs {
    width: 30px;
    height: 30px;
    background: url(https://os.alipayobjects.com/rmsportal/lybcjqloSPjMAFg.png) no-repeat;
}

footer p {
    text-align: center;
    color: #999;
}

/*=============
    打印样式
===============*/
@media print {
    /*所有元素的背景清除，字体颜色变成黑色，边框阴影，字体阴影全部去掉*/
    *,
    *:before,
    *:after {
        /*transparent是全透明黑色(black)的速记法，就是没有背景色，即一个类似rgba(0,0,0,0)这样的值*/
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /*所有的连接加下划线，一看就知道是超链接*/
    a,
    a:visited {
        text-decoration: underline;
    }

    /*超链接的后面显示超链接的内容*/
    a[href]:after {
        content: "(" attr(href) ")";
    }

    abbr[title]:after {
        content: "(" attr(title) ")";
    }

    /*使用#和javascript的超链接不打印href*/
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    /*pre 元素可定义预格式化的文本，例如一段代码*/
    pre,
        /*标签定义块引用*/
    blockquote {
        border: 1px solid #999;
        /*这个属性只有opera浏览器才起作用，不在元素内部插入分页符*/
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        /*当标题上下有3行空间时，才分页，保证标题和文字不会分离开*/
        /*当元素内部发生分页时，必须在页面底部保留的行数*/
        orphans: 3;
        /*当元素内部发生分页时，必须在页面顶部保留的行数*/
        widows: 3;
    }

    h2,
    h3 {
        /*避免在元素后面插入分页符*/
        page-break-after: avoid;
    }

}
